<template>
  <div>
    <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="项目区域" prop="projectRegion">
        <el-select v-model="queryParams.projectRegion" placeholder="请选择" clearable @keyup.enter.native="handleQuery">
          <el-option v-for="dict in dict.type.cld_project_region" :key="dict.value" :label="dict.label"
                     :value="parseInt(dict.value)"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="项目名称" prop="projectName">
        <el-input v-model="queryParams.projectName" placeholder="请输入项目名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="负责人" prop="headPerson">
        <el-input v-model="queryParams.headPerson" placeholder="请输入负责人" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="projectList" border>
      <el-table-column label="项目区域" align="center" prop="projectRegion" width="120px;">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.cld_project_region" :value="scope.row.projectRegion" />
        </template>
      </el-table-column>
      <el-table-column label="项目名称" align="center" prop="projectName" width="200px;"/>
      <el-table-column label="项目业态" align="center" prop="projectBusiness" width="100px;">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.cld_project_business" :value="scope.row.projectBusiness" />
        </template>
      </el-table-column>
      <el-table-column label="项目类型" align="center" prop="projectType" width="100px;">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.cld_project_type" :value="scope.row.projectType" />
        </template>
      </el-table-column>
      <el-table-column label="负责人" align="center" prop="headPerson" width="100px;"/>
      <el-table-column label="联系电话" align="center" prop="headPhone" width="120px;"/>
      <el-table-column label="合同开始日期" align="center" prop="startDate" width="100px;"/>
      <el-table-column label="合同结束日期" align="center" prop="endDate" width="100px;"/>
      <el-table-column label="合同状态" align="center" prop="contractStatus" width="80px;">
        <template slot-scope="scope">
          <dict-tag :options="cldContractStatusOptions" :value="parseInt(scope.row.contractStatus)" />
        </template>
      </el-table-column>
      <el-table-column label="项目地址" prop="address" />
      <el-table-column label="终止原因" prop="contractEndReason" />
      <el-table-column label="终止时间" align="center" prop="contractEndTime" width="100px;">
        <template slot-scope="scope">
          {{parseTime(scope.row.contractEndTime, '{y}-{m}-{d}')}}
        </template>
      </el-table-column>
      <el-table-column label="采集人" align="center" prop="collectionUserName" width="100px;"/>
      <el-table-column label="创建人" align="center" prop="createName" width="100px;"/>
      <el-table-column align="center" class-name="small-padding fixed-width" label="操作" width="100px;">
        <template slot-scope="scope">
          <el-button v-hasPermi="['cld:project:config']" size="mini" type="text" @click="handleContractSet(scope.row)">項目配置</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNum" :total="total"
                @pagination="getList"/>

    <!-- 添加或修改项目对话框 -->
    <el-dialog v-if="openSet" :close-on-click-modal="false" :visible.sync="openSet" append-to-body title="项目配置" width="50%">
      <el-tabs v-model="activeSetName" type="border-card" @tab-click="handleTabClick">
        <el-tab-pane label="项目信息" name="project">
          <add-project v-if="activeSetName == 'project'" ref="addProject" :projectId="projectObj.projectId"/>
        </el-tab-pane>
        <el-tab-pane label="合同信息" name="contract">
          <add-contract v-if="activeSetName == 'contract'" ref="addContract" :projectId="projectObj.contractId"/>
        </el-tab-pane>
        <el-tab-pane label="项目配置" name="groupConfig">
          <add-configuration v-if="activeSetName == 'groupConfig'" ref="addConfiguration" :projectObj="projectObj"/>
        </el-tab-pane>
        <el-tab-pane label="物资配置阈值" name="material">
          <el-table v-loading="loading" :data="materialList">
            <el-table-column align="center" label="商品编号" prop="commodityNo"/>
            <el-table-column align="center" label="商品名称" prop="commodityName1"/>
            <el-table-column align="center" label="品牌" prop="commodityBrand"/>
            <el-table-column align="center" label="规格" prop="commoditySpec"/>
            <el-table-column align="center" label="单位" prop="unitName1"/>
            <el-table-column align="center" label="配送阈值" prop="commodityNum" width="120">
              <template slot-scope="scope">
                <el-input v-model="scope.row.commodityNum" onkeyup="this.value = this.value.replace(/[^A-z0-9]/, '')"
                          type="number"></el-input>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { delProject, listProjectContract } from "@/api/cld/project";
import { getSysUserList } from "@/api/system/user";
// 引入静态字典
import { cldContractStatusOptions } from '@/assets/staticDict'
import addProject from "./addProject.vue";
import addContract from "./addContract.vue";
import addConfiguration from "./addConfiguration.vue";
import {listMaterial} from "@/api/cld/material";
export default {
  name: "projectExpire",
  dicts: ['cld_project_type', 'cld_project_business', 'cld_project_region'],
  components: {
    addProject,
    addContract,
    addConfiguration,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      projectList: [],
      activeSetName: 'project',
      // 显示搜索条件
      showSearch: true,
      openSet: false,
      // 总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        projectRegion: null,
        projectName: null,
        headPerson: null,
        projectStatus: 3,
      },
      personOptions: [],
      // 当前选中项目对象
      projectObj: {},
      // 项目
      projectId: null,
      // 物资配送阈值
      materialList: [],
      //合同状态(1履约2到期3终止)
      cldContractStatusOptions: cldContractStatusOptions
    };
  },
  created() {
    this.getList();
    this.handleGetListSysUser();
  },
  methods: {
    /** 查询项目列表 */
    getList() {
      this.loading = true;
      listProjectContract(this.queryParams).then(response => {
        this.projectList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 获取用户列表
    handleGetListSysUser() {
      getSysUserList().then(res => {
        this.personOptions = res.data;
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增项目配置操作 */
    handleContractSet(row) {
      this.activeSetName = 'project';
      // 设置项目id
      this.projectId = row.projectId;
      this.projectObj = row;
      this.openSet = true;
    },
    // 取消
    cancel() {
      this.openSet = false;
    },
    // 选项卡切换
    handleTabClick() {
      switch (this.activeSetName) {
        case 'material':
          this.handleGetMaterialList();
          break;
      }
    },
    // 物资配送
    handleGetMaterialList() {
      listMaterial(this.projectId).then(res => {
        this.materialList = res.data;
      })
    },
  }
};
</script>
<style scoped>
.el-select {
  width: 100%;
}

.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
</style>
